
<template>
    <div v-if="router.currentRoute.value.path != '/login'">
        <header>
            <router-view name="topBar"></router-view>
        </header>
        <main>
            <div :class="store.isCollpse ? leftClass2 : leftClass1">
                <router-view name="sideBar"></router-view>
            </div>
            <div class="right">
                <!-- <card :title="store.title" :showLeftLine="cardInfo.showLeftLine" :titleStyle="cardInfo.titleStyle"
                    :size="cardInfo.size" class="card"></card> -->
                <router-view name="content"></router-view>
            </div>
        </main>

    </div>
    <div v-else>
        <router-view></router-view>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import {  ref } from 'vue';
import useGlobalStore from './store/modules/global';
// import card from '@/components/card/index.vue'

const router = useRouter()
const store = useGlobalStore()
const leftClass1 = ref(['left'])
const leftClass2 = ref(['left', 'collpase'])

//卡片信息
// const cardInfo = reactive({
//     showLeftLine: true,
//     titleStyle: '',
//     size: '20'
// })
</script>
<style scoped>
header {
    height: 50px;
    background-color: #6383ff;
    padding: 0 20px;
    /* 0,0,0,0,8 */
    /* #333 */
}

main {
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    bottom: 0;
}

.left {
    width: 200px;
    float: left;
    height: calc(100vh - 50px);
}

.collpase {
    width: 63px;
    transition: .5s;
}

.right {
    overflow: hidden;
    background-color: #f8f8f8;
    height: calc(100vh - 50px);
    box-sizing: border-box;

    .card {
        width: 150px;
        margin-left: 27px;
        /* margin-top: 10px; */
    }
}</style>
